<template>
  <div>
    <div class="content">
      <div v-show="defaultIndex==1">
        <!-- 通过手机验证 -->
        <identity-through-mobile @nextStep='nextStep(2)' v-show="queryType=='mobile'"></identity-through-mobile>
        <!-- 通过邮箱验证 -->
        <identity-through-email @nextStep='nextStep(2)' v-show="queryType=='email'"></identity-through-email>
      </div>
      <!-- 重置交易密码 -->
      <div class="form" v-show="defaultIndex==2">
        <h3 class="user-title">{{'USER_TRADE_PASS_CHANGE'|t}}</h3>
        <!-- <zx-form-group :title="$t('OLD_PASS_LABEL')">
          <zx-input v-model="tradeForm.oldPass" type="password" :place="$t('OLD_PASS_PLACE')" ref="oldPass" :rules='rules.password'>
          </zx-input>
        </zx-form-group> -->
        <zx-form-group :title="$t('NEW_PASS_LABEL')">
          <zx-input v-model="tradeForm.newPass" type="password" :place="$t('NEW_PASS_PLACE')" ref="newPass" :rules='rules.password'>
          </zx-input>
        </zx-form-group>
        <zx-form-group :title="$t('CHECK_PASS')">
          <zx-input v-model="tradeForm.checkNewPass" type="password" :place="$t('CHECK_PASS_PLACE')" ref="checkNewPass" :rules='rules.password'>
          </zx-input>
        </zx-form-group>
        <zx-form-group>
          <input type="submit" class="submit-btn mt-20  green-btn radius" :value="$t('COMFIRM')" @click="submitForm('tradeForm')">
        </zx-form-group>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import { Form, Func, Auth, Rules } from '@/providers';
  import { User, UserInfo } from '@/services';
  import identityThroughMobile from '@/components/identity-through-mobile';
  import identityThroughEmail from '@/components/identity-through-email';
  export default {
    data() {
      return {
        queryType: 'mobile',
        defaultIndex: 1,
        tradeForm: {
          oldPass: '',
          newPass: '',
          checkNewPass: ''
        },
        rules: Rules
      };
    },
    methods: {
      // 获取验证码
      getCode(val, type, innerText, event, clickBool) {
        if (this[clickBool]) { return false; };
        if (!Form.validItem(this, type)) { return; };
        this[clickBool] = true;
        if (type == 'phone') {
          Form.SendMobile(val, event.target, clickBool, innerText);
        } else {
          Form.SentMail(val, event.target, clickBool, innerText);
        }
      },
      // 下一步
      async nextStep(step) {
        this.defaultIndex = step;
      },
      async submitForm(formName, step) {
        if (!Form.validataForm(this, formName)) {
          return false;
        }
        let _parmas = this[formName];
        if (_parmas.newPass != _parmas.checkNewPass) {
          this.$dialog.toast({
            msg: '两次输入密码不一样',
            position: 'top'
          });
          return false;
        }
        try {
          let res = await User.UpdateDealPwd({
            token: Auth.getItem('token'),
            // oldPwd: Func.PasswordEncrypt(_parmas.oldPass),
            newPwd: Func.PasswordEncrypt(_parmas.checkNewPass)
          });
          if (!Form.checkResToken(res)) {
            return;
          };
          this.$dialog.toast({
            position: 'top',
            msg: res.desc,
            onOk: () => {
              this.$store.dispatch('GETUSERTATUS');
              this.$router.push('/user/trade');
            }
          });
        } catch (error) {
          Form.resetFrom(this, formName);
          console.log(error);
        }
      }
    },
    components: {
      'identity-through-mobile': identityThroughMobile,
      'identity-through-email': identityThroughEmail
    },
    created() {
      this.queryType = this.$route.query.type;
    }
  };
</script>
<style scoped lang="scss">
  @import "../../assets/sass/user.scss";
</style>